Zeplin For Mac软件特色:
1、设计师与开发者的福音
Zeplin 对于专业人员来说很好上手,创建一个 Project,你可以看到软件支持 Android、iOS、Web 三种工作环境,另外开发者还提供可实验性质的 Mac OS X 软件开发环境。
2、标注与 Style Guide
作为项目人员,你可以随时通过软件和 Web 版进入 Project 对原稿进行标注(添加 Note,与对方就产品进行沟通),设计师可以制作 Style Guide,包括字体样式、色彩构成、Icon 样例、常用间距等内容。
3、高效的协同工作机制
作为一款项目组协同工作软件,Zeplin 可以让团队成员一共参与整个原稿的交流工作,项目创建者只需输入其他同事的邮箱或 Zeplin 账户名即可发出邀请。而如果当前工作环境不是 Mac,你也仍然能通过 Web App 参与工作。
软件介绍:
Zeplin面向的用户是设计师和前端(Web、Mobile)工程师,相当于做的是中间桥梁这一块,核心功能为标注、Style Guide、备注文档与简单的团队协作。这块软件由四名在伊斯坦布尔的开发者制作,目前仅支持 Sketch,但是 PS 也已经出现在官网,应该也快了。在使用 Zeplin 之前,最早是使用马克曼进行标注的,也就是直接在输出效果图上量尺寸;使用 Sketch 插件 Measure 之后,可以在画板中生成尺寸标注信息,导出标注图提供给开发同学使用。无论是马克曼还是 Measure,最后的交付物是一致的,大概如下图所示:
这样的标注图有个问题,就是已经破坏了原本的视觉效果图,标注的信息一定会对原设计稿形成遮挡,因此一般效果图和标注图要分开给,开发也经常需要在两个图之间切换,图片管理不太方便。如果你的设计稿同时要适配多个尺寸,还要要输出多份标注图,交付给多个开发同学。更重要的是,如果对页面进行了迭代修改,就需要重新标注、重新输出、重新交付,即开发与设计之间的联结是断的,每次都要人工把这个缺口接上。另外,如果时间有允许,设计师还需要制作 Style Guide,一方面是为了方便切图,另一方面是为后期迭代做好准备。Style Guide 大概要包含的是字体信息、色彩信息、icon 样例、常用间距等内容,如果自己制作的话,大概类似于是这样:
Zeplin 主要就是为了解决上述问题的,使用它之后,可以在 Sketch 中一键导入 Artboard,在设计师做好图层管理(命名、分组)的前提下,它可以自动生成标注信息(并且可以标注为 pt 或 dp),允许添加注释形成类 prd 文档,并且自动提取 Style Guide,同时还允许添加项目组成员,提供给团队组查看项目。
这是项目组管理界面,还有关于项目的简单统计,比如多少页屏幕、多少色彩和多少注释等。
Guideline,可以承载字体、颜色。
图片界面,当鼠标不悬浮在某个元素上时,可以查看整个界面的效果图。右侧可以看到所有使用的颜色列表。当需要查看标注时,点击对应的元素即可:
这样的话,设计师和工程师就可以无缝衔接了,团队的开发同学都说这个工具太牛了:)缺点的话,目前有一些体验上的小问题。比如图片是存储在境外服务器上的,不管是登录还是使用最好都能自带梯子翻墙(使用好像并不需要翻墙,我都可以,但是注册登录一定要),一开始就是因为被墙的原因多次登录不上。其次是产品本身还是 Beta 版,处于邀请码阶段,所以肯定会有一些 bug 存在,像全屏之后右上角没有常用的放大缩小关闭按钮,还有 Sketch 插件一键导入快捷键经常失败等。使用方法:基础使用介绍Zeplin 对于专业人员来说很好上手,创建一个 Project,你可以看到软件支持 Android、iOS、Web 三种工作环境,另外开发者还提供可实验性质的 Mac OS X 软件开发环境。
此时到 Sketch 里找到 Menubar – Plugins 目录,如果你安装了 Zeplin 专为 Sketch 开发的插件,可以直接在插件目录里选择“Export Selected Artboards”将文件导入 Zeplin,这个速度很快。
标注与Style Guide作为项目人员,你可以随时通过软件和 Web 版进入 Project 对原稿进行标注(添加 Note,与对方就产品进行沟通),设计师可以制作 Style Guide,包括字体样式、色彩构成、Icon 样例、常用间距等内容。
高效的协同工作机制作为一款项目组协同工作软件,Zeplin 可以让团队成员一共参与整个原稿的交流工作,项目创建者只需输入其他同事的邮箱或 Zeplin 账户名即可发出邀请。而如果当前工作环境不是 Mac,你也仍然能通过 Web App 参与工作。